<template>
	<section class="todoapp">
		<TodoHeader @add="addFn"></TodoHeader>
		<TodoMain :arr="newList" @del="delFn"></TodoMain> <!-- 传递数组到子组件 -->
		<TodoFooter :arr="list" @change="changeFn"
		@changeType="changeTypeFn"
		></TodoFooter>
	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'
	import './styles/base.css'
	import './styles/index.css'
	export default {
		computed:{
			newList(){
				if(this.type === 'all'){
					return this.list
				}else if(this.type === 'active'){
					return this.list.filter(item => !item.isDone)
				}else if(this.type === 'complete'){
					return this.list.filter(item => item.isDone)
				}
			}
		},
		data() {
			return {
				type:'all',
				list: JSON.parse(localStorage.getItem('todos25')) || []
			};
		},
		//注册组件
		components:{
			TodoHeader,
			TodoMain,
			TodoFooter
		},
		//绑定事件;一定要记得接收
		methods:{
			delFn(newid){
			this.list =	this.list.filter(item =>item.id !== newid)
			},
			addFn(name){
				let id = new Date()
				this.list.unshift({
					id,
					name,
					isDone:false
				})
			},
			changeFn(){
			return	this.list =	this.list.filter(item => !item.isDone)
			},
			changeTypeFn(type){
				this.type = type
			}
		},
		watch:{
			list:{
				handler(){
					localStorage.setItem('todos25',JSON.stringify(this.list))
				},
				deep:true
			}
		}
	};
</script>
